import { Suspense, FC } from "react";
import { Switch, Route, Redirect } from "react-router-dom";
import { RouteList, RouteListItem } from "../utils/types";

// function component
const RouteView: FC<RouteList> = (props) => {
  const { routes = [] } = props;
  return (
    <Suspense fallback={<div>加载中</div>}>
      <Switch>
        {routes.map((item: RouteListItem, index: number) => {
          return (
            <Route
              key={index}
              path={item.path}
              render={(historyProps) => {
                return item.redirect ? (
                  <Redirect to={item.redirect} />
                ) : (
                  <item.component {...historyProps} routes={item.children} />
                );
              }}
            />
          );
        })}
      </Switch>
    </Suspense>
  );
};

export default RouteView;